<!--
  @anthor: 邓磊,
  @description:自定义字段，自定义表单
  @date: 2020 / 09/20,
  @remark:
 -->
<!-- ***************** 请保持数据一致性！*****************-->
<!--
 引用示例：
  <setForm :visible="dialogVisible" @dialog="dialog"></setForm>
 filterList：传入的表头数据
 dialogVisible：控制显隐 与@dialog关闭事件回调一起使用
 @dialog：关闭回调
 @callback：确认事件回调,传出字段过滤并排序后的数据，数据格式与传入时一致
  -->
<template>
  <div class="lump" v-if="visible">
    <div class="choice_box">
      <div class="clearfix top_tips">
        <p class="fl tips">设置字段</p>
        <p @click="closeVisible()" class="close fr">
          <i class="el-icon-close"></i>
        </p>
      </div>
      <div class="clearfix bot_bot">
        <div class="left_bot">
          <p class="form-tit">！拖动空间到表单</p>
          <!--列表1-->
          <draggable
            class="listLeft"
            element="div"
            v-model="listLeft"
            :options="dragOptions1"
            :move="onMove"
            @start="isDragging = true"
            @end="isDragging = false"
          >
            <div class="li" v-for="(item, key) in listLeft" :key="key">
              <span>{{ item.name }}</span>
              <i
                v-if="item.value == 'inputText'"
                class="iconfont icon-danhangshurukuang"
              ></i>
              <i
                v-else-if="item.value == 'textarea'"
                class="el-icon-s-unfold"
              ></i>
              <i
                v-else-if="item.value == 'select'"
                class="el-icon-caret-bottom"
              ></i>
              <i
                v-else-if="item.value == 'checkbox'"
                class="iconfont icon-duoxuankuang"
              ></i>
              <i
                v-else-if="item.value == 'radio'"
                class="iconfont icon-danxuankuangxuanzhong"
              ></i>
              <i v-else-if="item.value == 'switch'" class="el-icon-open"></i>
              <i
                v-else-if="item.value == 'formDataTime'"
                class="iconfont icon-29"
              ></i>
              <i
                v-else-if="item.value == 'personnel'"
                class="iconfont icon-renyuanxuanze"
              ></i>
              <i
                v-else-if="item.value == 'upImg'"
                class="el-icon-picture-outline"
              ></i>
              <i
                v-else-if="item.value == 'upFolder'"
                class="iconfont icon-shangchuanfujian"
              ></i>
              <i v-else class="iconfont icon-fuwenben"></i>
            </div>
          </draggable>
        </div>
        <div class="center_bot">
          <p class="form-tit">表单，可拖动改变控件的顺序。</p>
          <div class="sutoScroll">
            <draggable
              class="list-group layui-form"
              element="div"
              v-model="listRight"
              :options="dragOptions2"
              :move="onMove"
              :scroll="true"
              @start="rightStart"
              @add="addList"
              @end="rightEnd"
            >
              <div
                :class="listCurShu == key ? 'li cur' : 'li'"
                v-for="(item, key) in listRight"
                :key="key"
                @click="listCur(key)"
              >
                <!-- element ui -->
                <!-- 单行输入框 -->
                <div
                  class="ele-form-item"
                  :class="item.value + 'Pc'"
                  v-if="item.value == 'inputText'"
                >
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-input
                          type="text"
                          name="title"
                          :placeholder="item.placeholder"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 多行输入框 -->
                <div class="ele-form-item" v-else-if="item.value == 'textarea'">
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-input
                          type="textarea"
                          resize="none"
                          :rows="4"
                          :placeholder="item.placeholder"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 下拉列表 -->
                <div class="ele-form-item" v-else-if="item.value == 'select'">
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-select
                          style="width:100%"
                          :placeholder="item.placeholder"
                        >
                          <el-option label="选项1" value="0"></el-option>
                          <el-option label="选项2" value="1"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 多选框 -->
                <div class="ele-form-item" v-else-if="item.value == 'checkbox'">
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-checkbox-group v-model="checkList">
                          <el-checkbox label="复选框 A"></el-checkbox>
                          <el-checkbox label="复选框 B"></el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 单选框 -->
                <div class="ele-form-item" v-else-if="item.value == 'radio'">
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-radio-group>
                          <el-radio :label="3">备选项</el-radio>
                          <el-radio :label="6">备选项</el-radio>
                          <el-radio :label="9">备选项</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 开关按钮 -->
                <div class="ele-form-item" v-else-if="item.value == 'switch'">
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-switch
                          active-color="#13ce66"
                          inactive-color="#dcdfe6"
                        ></el-switch>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 日期 -->
                <div
                  class="ele-form-item"
                  v-else-if="item.value == 'formDataTime'"
                >
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-date-picker
                          style="width:100%"
                          type="date"
                          :placeholder="item.placeholder"
                        ></el-date-picker>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 人员选择 -->
                <div
                  class="ele-form-item"
                  v-else-if="item.value == 'personnel'"
                >
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-input
                          placeholder="请选择人员"
                          class="input-with-select"
                        >
                          <el-button slot="append">{{
                            item.placeholder
                          }}</el-button>
                        </el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 图片上传 -->
                <div class="ele-form-item" v-else-if="item.value == 'upImg'">
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-upload
                          class="upload-demo"
                          action="#"
                          list-type="picture"
                        >
                          <el-button
                            size="small"
                            icon="el-icon-plus"
                            type="primary"
                            >上传图片</el-button
                          >
                          <span slot="tip" class="el-upload__tip"
                            >只能上传jpg/png文件，{{ item.placeholder }}</span
                          >
                        </el-upload>
                        <div class="imgZw">
                          <span id="moren">图片预览</span>
                        </div>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 文件上传 -->
                <div class="ele-form-item" v-else-if="item.value == 'upFolder'">
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <el-upload
                          class="upload-demo"
                          action="#"
                          list-type="picture"
                        >
                          <el-button
                            size="small"
                            icon="el-icon-plus"
                            type="primary"
                            >上传附件</el-button
                          >
                          <span slot="tip" class="el-upload__tip">
                            {{ item.placeholder }}
                          </span>
                        </el-upload>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <!-- 富文本 -->
                <div class="ele-form-item" v-else-if="item.value == 'richText'">
                  <div class="ele-input-block">
                    <el-form label-width="100px">
                      <el-form-item :label="item.name">
                        <TinymceEditor
                          ref="editor"
                          :disabled="disabled"
                          :base-url="baseUrl"
                          :language="language"
                          :skin="skin"
                        />
                        <!-- <Tinymce
                          id="Tinymce01"
                          :width="400"
                          menubar="file"
                          :toolbar="toolbar"
                          :plugins="plugins"
                          v-model="item.placeholder"
                        ></Tinymce> -->
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <i class="el-icon-error delIcon" @click="delLi(key)"></i>
              </div>
            </draggable>
          </div>
        </div>
        <div class="right_bot">
          <p class="form-tit">控件属性（控件名称最佳显示在5个字以内）</p>
          <div class="configure">
            <div
              v-for="(item, key) in listRight"
              :key="key"
              v-show="listCurShu == key"
            >
              <!-- 单行输入框 -->
              <div
                class="inputText"
                :class="item.value + 'm'"
                v-if="item.value == 'inputText' || item.value == 'textarea'"
                style="margin-top:15px;"
              >
                <el-form ref="form" label-width="120px">
                  <el-form-item label="字段名称">
                    <el-input
                      type="text"
                      v-model="item.name"
                      placeholder="请输入字段名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="提示语">
                    <el-input
                      type="text"
                      v-model="item.placeholder"
                      placeholder="请输入提示语"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="必填">
                    <el-switch
                      v-model="item.switch"
                      active-color="#13ce66"
                      inactive-color="#dcdfe6"
                    ></el-switch>
                  </el-form-item>
                  <el-form-item label="另存对象（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_NAME"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="另存对象字段（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_FIELD"
                      placeholder
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 单行输入框 -->
              <div
                class="inputText"
                :class="item.value + 'm'"
                v-else-if="item.value == 'select'"
              >
                <el-form ref="form" label-width="120px">
                  <el-form-item label="字段名称">
                    <el-input
                      type="text"
                      v-model="item.name"
                      placeholder="请输入字段名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="提示语">
                    <el-input
                      type="text"
                      v-model="item.placeholder"
                      placeholder="请输入提示语"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="必填">
                    <el-switch
                      v-model="item.switch"
                      active-color="#13ce66"
                      inactive-color="#dcdfe6"
                    ></el-switch>
                  </el-form-item>
                  <el-form-item label="另存对象（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_NAME"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="另存对象字段（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_FIELD"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="选项来源">
                    <el-radio-group v-model="item.Object_Origin">
                      <el-radio :label="0">字面值</el-radio>
                      <el-radio :label="1">数据字典</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="字典类型">
                    <el-input
                      type="text"
                      v-model="item.DictType"
                      placeholder="填写字典类型名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="选项">
                    <el-input
                      type="text"
                      v-model="item.options"
                      placeholder="多个选项用逗号隔开"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="sql语句">
                    <el-input
                      type="text"
                      v-model="item.sqlLang"
                      placeholder
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 复选框 &&单选框-->
              <div
                class="inputText"
                :class="item.value + 'm'"
                v-else-if="item.value == 'checkbox' || item.value == 'radio'"
              >
                <el-form ref="form" label-width="120px">
                  <el-form-item label="字段名称">
                    <el-input
                      type="text"
                      v-model="item.name"
                      placeholder="请输入字段名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="提示语">
                    <el-input
                      type="text"
                      v-model="item.placeholder"
                      placeholder="请输入提示语"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="必填">
                    <el-switch
                      v-model="item.switch"
                      active-color="#13ce66"
                      inactive-color="#dcdfe6"
                    ></el-switch>
                  </el-form-item>
                  <el-form-item label="另存对象（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_NAME"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="另存对象字段（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_FIELD"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="选项">
                    <el-input
                      type="text"
                      v-model="item.options"
                      placeholder="多个选项用逗号隔开"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 开关按钮 -->
              <div
                class="inputText"
                :class="item.value + 'm'"
                v-else-if="item.value == 'switch'"
              >
                <el-form ref="form" label-width="120px">
                  <el-form-item label="字段名称">
                    <el-input
                      type="text"
                      v-model="item.name"
                      placeholder="请输入字段名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="提示语">
                    <el-input
                      type="text"
                      v-model="item.placeholder"
                      placeholder="请输入提示语"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="必填">
                    <el-switch
                      v-model="item.switch"
                      active-color="#13ce66"
                      inactive-color="#dcdfe6"
                    ></el-switch>
                  </el-form-item>
                  <el-form-item label="另存对象（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_NAME"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="另存对象字段（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_FIELD"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="选项">
                    <el-input
                      type="text"
                      v-model="item.options"
                      placeholder="true|false"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 日期 -->
              <div
                class="inputText"
                :class="item.value + 'm'"
                v-else-if="item.value == 'formDataTime'"
              >
                <el-form ref="form" label-width="120px">
                  <el-form-item label="字段名称">
                    <el-input
                      type="text"
                      v-model="item.name"
                      placeholder="请输入字段名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="提示语">
                    <el-input
                      type="text"
                      v-model="item.placeholder"
                      placeholder="请输入提示语"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="必填">
                    <el-switch
                      v-model="item.switch"
                      active-color="#13ce66"
                      inactive-color="#dcdfe6"
                    ></el-switch>
                  </el-form-item>
                  <el-form-item label="另存对象（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_NAME"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="另存对象字段（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_FIELD"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="日期格式">
                    <el-input
                      type="text"
                      v-model="item.dateFormat"
                      placeholder="默认yyyy-MM-dd"
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 人员选择 -->
              <div
                class="inputText"
                :class="item.value + 'm'"
                v-else-if="item.value == 'personnel'"
              >
                <el-form ref="form" label-width="120px">
                  <el-form-item label="字段名称">
                    <el-input
                      type="text"
                      v-model="item.name"
                      placeholder="请输入字段名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="提示语">
                    <el-input
                      type="text"
                      v-model="item.placeholder"
                      placeholder="请输入提示语"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="必填">
                    <el-switch
                      v-model="item.switch"
                      active-color="#13ce66"
                      inactive-color="#dcdfe6"
                    ></el-switch>
                  </el-form-item>
                  <el-form-item label="另存对象（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_NAME"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="另存对象字段（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_FIELD"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="选人数量">
                    <el-radio-group v-model="item.radioVal">
                      <el-radio :label="0">一人</el-radio>
                      <el-radio :label="1">多人</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 上传图片 -->
              <div
                class="inputText"
                :class="item.value + 'm'"
                v-else-if="item.value == 'upImg'"
              >
                <el-form ref="form" label-width="120px">
                  <el-form-item label="字段名称">
                    <el-input
                      type="text"
                      v-model="item.name"
                      placeholder="请输入字段名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="提示语">
                    <el-input
                      type="text"
                      v-model="item.placeholder"
                      placeholder="请输入提示语"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="必填">
                    <el-switch
                      v-model="item.switch"
                      active-color="#13ce66"
                      inactive-color="#dcdfe6"
                    ></el-switch>
                  </el-form-item>
                  <el-form-item label="另存对象（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_NAME"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="另存对象字段（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_FIELD"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="图片数量">
                    <el-radio-group v-model="item.radioVal">
                      <el-radio :label="0">单张</el-radio>
                      <el-radio :label="1">多张</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="图片大小">
                    <el-input
                      type="text"
                      v-model="item.ImgSize"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="图片类型">
                    <el-input
                      type="text"
                      v-model="item.ImgType"
                      placeholder
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 上传附件 -->
              <div
                class="inputText"
                :class="item.value + 'm'"
                v-else-if="item.value == 'upFolder'"
              >
                <el-form ref="form" label-width="120px">
                  <el-form-item label="字段名称">
                    <el-input
                      type="text"
                      v-model="item.name"
                      placeholder="请输入字段名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="提示语">
                    <el-input
                      type="text"
                      v-model="item.placeholder"
                      placeholder="请输入提示语"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="必填">
                    <el-switch
                      v-model="item.switch"
                      active-color="#13ce66"
                      inactive-color="#dcdfe6"
                    ></el-switch>
                  </el-form-item>
                  <el-form-item label="另存对象（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_NAME"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="另存对象字段（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_FIELD"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="文件数量">
                    <el-radio-group v-model="item.radioVal">
                      <el-radio :label="0">单个</el-radio>
                      <el-radio :label="1">多个</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="文件大小">
                    <el-input
                      type="text"
                      v-model="item.fileSize"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="文件类型">
                    <el-input
                      type="text"
                      v-model="item.fileType"
                      placeholder
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
              <!-- 富文本 -->
              <div
                class="inputText"
                :class="item.value + 'm'"
                v-else
                style="margin-top:15px;"
              >
                <el-form ref="form" label-width="120px">
                  <el-form-item label="字段名称">
                    <el-input
                      type="text"
                      v-model="item.name"
                      placeholder="请输入字段名称"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="提示语">
                    <el-input
                      type="text"
                      v-model="item.placeholder"
                      placeholder="请输入提示语"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="必填">
                    <el-switch
                      v-model="item.switch"
                      active-color="#13ce66"
                      inactive-color="#dcdfe6"
                    ></el-switch>
                  </el-form-item>
                  <el-form-item label="另存对象（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_NAME"
                      placeholder
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="另存对象字段（自行处理）">
                    <el-input
                      type="text"
                      v-model="item.OBJECT_FIELD"
                      placeholder
                    ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bot_bottom_bot">
        <el-button type="primary" size="mini" @click="submit()"
          >保存表单</el-button
        >
        <el-button type="primary" size="mini" @click="preview()"
          >预览表单</el-button
        >
        <el-button size="mini" @click="closeVisible()">关闭</el-button>
      </div>
      <perviewForm :previsible="perviewVisible" @dialog="dialog" />
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import TinymceEditor from "../../tinymce-editor.vue"; //改成自己的文件夹
import perviewForm from "./preview.vue";
var dataList = [
  {
    name: "单行输入框",
    value: "inputText",
    placeholder: "请输入内容",
    switch: true,
    OBJECT_NAME: "",
    OBJECT_FIELD: ""
  },
  {
    name: "多行输入框",
    value: "textarea",
    placeholder: "请输入内容",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: ""
  },
  {
    name: "下拉列表",
    value: "select",
    placeholder: "点击选择",
    switch: false,
    Object_Origin: 0, //选项来源
    DictType: "", //字典类型
    options: "", //选项
    sqlLang: "" //sql语句
  },
  {
    name: "多选框",
    value: "checkbox",
    placeholder: "点击选择",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: "",
    options: "" //选项
  },
  {
    name: "单选框",
    value: "radio",
    placeholder: "点击选择",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: "",
    options: "" //选项
  },
  {
    name: "开关按钮",
    value: "switch",
    placeholder: "点击选择",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: "",
    options: "" //选项
  },
  {
    name: "日期",
    value: "formDataTime",
    placeholder: "点击选择时间",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: "",
    dateFormat: "" //日期格式
  },
  {
    name: "人员选择",
    value: "personnel",
    placeholder: "点击选择人员",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: "",
    radioVal: 0 //单选框值
  },
  {
    name: "上传图片",
    value: "upImg",
    placeholder: "大小不能超过8M",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: "",
    radioVal: 0, //单选框值
    ImgSize: "", //图片大小
    ImgType: "" //图片类型
  },
  {
    name: "上传附件",
    value: "upFolder",
    placeholder: "大小不能超过8M",
    switch: false,
    OBJECT_NAME: "",
    OBJECT_FIELD: "",
    radioVal: 0, //单选框值
    fileSize: "", //图片大小
    fileType: "" //图片类型
  },
  {
    name: "富文本",
    value: "richText",
    placeholder: "请输入内容",
    switch: true,
    OBJECT_NAME: "",
    OBJECT_FIELD: ""
  }
];
export default {
  name: "setForm",
  components: {
    draggable,
    TinymceEditor,
    perviewForm
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      initial: [], //初始化数据
      checkAll: false,
      checkedFiled: [],
      checkedFiledList: [],
      isIndeterminate: true,
      perviewVisible: false, //控制预览表单
      drag: false,
      toolbar: [
        "searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo "
      ],
      plugins: [
        "advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists media"
      ],
      isDragging: false,
      selectValue: "0",
      indexList: 0,
      listCurShu: 0,
      listLeft: [],
      listRight: [],
      oldleftlist: [],
      checkList: ["复选框 A"],
      disabled: false,
      baseUrl: "",
      language: "zh_CN",
      skin: "oxide",
      form: {
        val: ""
      }
    };
  },
  computed: {
    dragOptions1() {
      return {
        animation: 0,
        group: {
          name: "description",
          pull: "clone"
        },
        ghostClass: "ghost", //停靠的样式
        chosenClass: "chosen" //选中的样式
      };
    },
    dragOptions2() {
      return {
        animation: 300,
        group: "description"
      };
    }
  },
  watch: {
    visible: function() {}
  },
  mounted() {
    this.listLeft = JSON.parse(JSON.stringify(dataList));
    this.listRight = JSON.parse(JSON.stringify(dataList));
  },
  methods: {
    beforeClose() {},
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
    },

    closeVisible() {
      this.$emit("dialog", []);
    },
    submit() {
      let that = this;

      that.$emit("callback", finalData);
      that.closeVisible();
    },
    //保存表单
    onSubmit() {},
    addList() {
      //  form.render();
      this.listLeft = JSON.parse(JSON.stringify(this.listLeft));
      this.listRight = JSON.parse(JSON.stringify(this.listRight));
    },
    listCur(i) {
      this.listCurShu = i;
    },
    onMove({ relatedContext, draggedContext }) {
      this.indexList = relatedContext.index;
      console.log("---relatedElement", relatedContext);
      console.log("---draggedElement", draggedContext);
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    },
    rightStart() {
      console.log("=---list", this.oldleftlist);
      this.oldleftlist = JSON.parse(JSON.stringify(this.listLeft.concat()));
      this.isDragging = true;
    },
    rightEnd() {
      console.log("--indexList", this.indexList);
      this.listCurShu = this.indexList;
      this.isDragging = false;
      //左边数据不变
      this.listLeft = JSON.parse(JSON.stringify(this.oldleftlist.concat()));
    },
    //删除队列
    delLi(index) {
      this.listRight.splice(index, 1);
    },
    //预览表单
    preview() {
      this.perviewVisible = !this.perviewVisible;
      console.log("---res", this.listRight);
      this.$store.commit("loadCurForm", this.listRight);
    },
    dialog() {
      this.perviewVisible = !this.perviewVisible;
    }
  },
  created() {}
};
</script>

<style scoped>
@import "setForm.css";
</style>
